
import { useEffect, useRef } from 'react';
import { init, graphic } from 'echarts';


interface Props {
  graphics: Array<unknown>;
  data: Array<unknown>;
}
export default function Indicator(props: Props) {

  // const { graphics = [], data = [] } = props;
  const domRef = useRef(null);


  const rule = {
    0: 'gray',
    1: 'red',
    2: 'green'
  }

  const graphics = [
    { key: '1', icon: 'data:image/svg+xml;charset=utf-8;base64,ICA8c3ZnCiAgICB0PSIxNzIyODI3NDY0MjYwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMjgiCiAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPgogICAgPHBhdGgKICAgICAgZD0iTTc0OS4yMTYgODkyLjA5NmwtMjcuMTM2LTQzLjQyNEM4MzkuMDA4IDc3NS41ODQgOTA4LjggNjQ5LjcyOCA5MDguOCA1MTJjMC0xMzMuMjE2LTY2LjMzNi0yNTYuODMyLTE3Ny40MDgtMzMwLjY4OGwyOC4zNTItNDIuNjI0Qzg4NS4xMiAyMjIuMDQ4IDk2MCAzNjEuNiA5NjAgNTEyYzAgMTU1LjQ4OC03OC43ODQgMjk3LjU2OC0yMTAuNzg0IDM4MC4wOTZ6TTI3NC43ODQgODkyLjEyOEMxNDIuODE2IDgwOS41NjggNjQgNjY3LjQ4OCA2NCA1MTJjMC0xNTAuNCA3NC44OC0yODkuOTUyIDIwMC4yNTYtMzczLjMxMmwyOC4zNTIgNDIuNjI0QzE4MS41MzYgMjU1LjE2OCAxMTUuMiAzNzguNzg0IDExNS4yIDUxMmMwIDEzNy43MjggNjkuNzkyIDI2My41ODQgMTg2LjcyIDMzNi43MDRsLTI3LjEzNiA0My40MjR6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTI5Ij48L3BhdGg+CiAgICA8cGF0aAogICAgICBkPSJNNTEyIDg0OGMtMTg1LjI4IDAtMzM2LTE1MC43Mi0zMzYtMzM2UzMyNi43MiAxNzYgNTEyIDE3NnMzMzYgMTUwLjcyIDMzNiAzMzYtMTUwLjcyIDMzNi0zMzYgMzM2eiBtMC02MjAuOGMtMTU3LjAyNCAwLTI4NC44IDEyNy43NzYtMjg0LjggMjg0LjggMCAxNTcuMDU2IDEyNy43NzYgMjg0LjggMjg0LjggMjg0LjggMTU3LjA1NiAwIDI4NC44LTEyNy43NDQgMjg0LjgtMjg0LjggMC0xNTcuMDI0LTEyNy43NDQtMjg0LjgtMjg0LjgtMjg0Ljh6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTMwIj48L3BhdGg+CiAgICA8cGF0aAogICAgICBkPSJNMjY0LjUxMiA2MTMuNTM2bDY3LjIzMi0yMDIuOTQ0aDM2Ljg2NGw2Ny4yMzIgMjAyLjk0NGgtMzMuODg4bC0xNy4wODgtNTcuODI0SDMxNC40MzJsLTE3LjM0NCA1Ny44MjRIMjY0LjUxMnogbTY1LjUwNC0xMTAuMTQ0bC04LjE5MiAyNy4yOTZoNTUuMzkybC04LjA2NC0yNy4yOTZjLTMuNDI0LTExLjA0LTYuNjU2LTIyLjE3Ni05Ljc2LTMzLjQwOC0zLjEwNC0xMS4yNjQtNi4xNzYtMjIuNjI0LTkuMjE2LTM0LjA4aC0xLjM0NGMtMi45NDQgMTEuNTUyLTYuMDE2IDIyLjk0NC05LjE1MiAzNC4xNDQtMy4xMDQgMTEuMi02LjMzNiAyMi4zMzYtOS42NjQgMzMuMzQ0ek00NTEuNjE2IDYxMy41MzZ2LTIwMi45NDRoNjIuODE2YzEzLjc5MiAwIDI2LjExMiAxLjYgMzYuOTI4IDQuODMyIDEwLjgxNiAzLjIzMiAxOS4yNjQgOC41MTIgMjUuNDA4IDE1Ljg3MiA2LjE0NCA3LjM2IDkuMjE2IDE3LjEyIDkuMjE2IDI5LjMxMiAwIDkuNjk2LTIuNTYgMTguNjU2LTcuNjggMjYuOTEyLTUuMTIgOC4yNTYtMTIuMTkyIDEzLjg4OC0yMS4yNDggMTYuOTZ2MS4zNDRjMTEuNTUyIDIuNDk2IDIxLjEyIDcuNzQ0IDI4LjY0IDE1LjY4czExLjI5NiAxOC44MTYgMTEuMjk2IDMyLjYwOGMwIDEzLjM0NC0zLjM2IDI0LjQxNi0xMC4wOCAzMy4yMTYtNi43MiA4LjgtMTUuOTM2IDE1LjM2LTI3LjY0OCAxOS43MTJzLTI1LjAyNCA2LjUyOC00MCA2LjUyOGgtNjcuNjQ4eiBtMzEuODcyLTExOC4yMDhoMjcuMjk2YzE1LjQyNCAwIDI2LjU5Mi0yLjcyIDMzLjQ3Mi04LjEyOCA2LjkxMi01LjQwOCAxMC4zNjgtMTIuODk2IDEwLjM2OC0yMi40IDAtMTAuNTkyLTMuNTg0LTE4LjA4LTEwLjc1Mi0yMi41MjgtNy4xNjgtNC40NDgtMTcuOTItNi42NTYtMzIuMjg4LTYuNjU2aC0yOC4wOTZ2NTkuNzEyeiBtMCA5My4xODRoMzIuMjg4YzE1Ljc3NiAwIDI4LjAzMi0yLjkxMiAzNi43NjgtOC43MzYgOC43MzYtNS44MjQgMTMuMTItMTQuOTc2IDEzLjEyLTI3LjQyNCAwLTExLjM5Mi00LjI4OC0xOS43MTItMTIuODMyLTI1LjAyNC04LjU3Ni01LjI4LTIwLjg5Ni03LjkzNi0zNy4wNTYtNy45MzZoLTMyLjI4OHY2OS4xMnpNNjc3LjQwOCA2MTcuMTg0Yy0xMy44ODggMC0yNy4xMDQtMi42MjQtMzkuNjE2LTcuODcyLTEyLjUxMi01LjI0OC0yMy4zOTItMTIuNTc2LTMyLjYwOC0yMS45ODRsMTguNjg4LTIxLjkyYzcuMzYgNy4yNjQgMTUuNzQ0IDEzLjA1NiAyNS4yMTYgMTcuNDA4czE5LjA3MiA2LjUyOCAyOC44MzIgNi41MjhjMTIuMjg4IDAgMjEuNzI4LTIuNjU2IDI4LjM4NC03LjkzNiA2LjYyNC01LjI4IDkuOTUyLTEyLjE5MiA5Ljk1Mi0yMC43MDQgMC02LjE3Ni0xLjQwOC0xMS4xNjgtNC4yMjQtMTQuOTEyLTIuODE2LTMuNzc2LTYuNjg4LTYuOTQ0LTExLjYxNi05LjUzNnMtMTAuNDk2LTUuMjgtMTYuNjcyLTguMDY0bC0yOC4wOTYtMTIuMDk2YTEwMC4zODQgMTAwLjM4NCAwIDAgMS0xOS4yOTYtMTAuOTc2Yy02LjMzNi00LjUxMi0xMS41NTItMTAuMjQtMTUuNzQ0LTE3LjE1Mi00LjE2LTYuOTEyLTYuMjQtMTUuMjMyLTYuMjQtMjUuMDI0IDAtMTAuNjU2IDIuODgtMjAuMjI0IDguNjA4LTI4LjY0IDUuNzI4LTguNDE2IDEzLjYzMi0xNS4wNzIgMjMuNjgtMTkuOTY4IDEwLjA0OC00Ljg5NiAyMS40NzItNy4zMjggMzQuMzA0LTcuMzI4IDExLjg0IDAgMjMuMTA0IDIuMzA0IDMzLjgyNCA2LjkxMiAxMC43MiA0LjYwOCAxOS45MzYgMTAuODE2IDI3LjY0OCAxOC42MjRsLTE2LjggMjAuNDQ4Yy02LjM2OC01LjYzMi0xMy4xNTItMTAuMDgtMjAuMzg0LTEzLjMxMi03LjItMy4yMzItMTUuMjk2LTQuODMyLTI0LjI1Ni00LjgzMi0xMC4zMDQgMC0xOC41OTIgMi4zMDQtMjQuOCA2LjkxMi02LjI0IDQuNjA4LTkuMzQ0IDEwLjkxMi05LjM0NCAxOC44OCAwIDUuOTIgMS42IDEwLjc1MiA0Ljc2OCAxNC40NjQgMy4xNjggMy43MTIgNy4yOTYgNi44NDggMTIuMjg4IDkuMzQ0IDUuMDI0IDIuNDk2IDEwLjI3MiA0Ljg5NiAxNS43NDQgNy4xMzZsMjcuODQgMTEuODRjMTIgNS4xMiAyMS44ODggMTEuNzc2IDI5LjY2NCAyMC4wMzIgNy43NDQgOC4yNTYgMTEuNjE2IDE5LjgwOCAxMS42MTYgMzQuNjg4IDAgMTAuODQ4LTIuODggMjAuNzM2LTguNjA4IDI5LjY2NC01LjcyOCA4LjkyOC0xMy45MiAxNi4wNjQtMjQuNTQ0IDIxLjM3Ni0xMC42ODggNS4zMTItMjMuNDI0IDgtMzguMjA4IDh6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTMxIj48L3BhdGg+CiAgPC9zdmc+' },
    { key: '2', icon: 'data:image/svg+xml;charset=utf-8;base64,ICA8c3ZnCiAgICB0PSIxNzIyODI3NDY0MjYwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMjgiCiAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPgogICAgPHBhdGgKICAgICAgZD0iTTc0OS4yMTYgODkyLjA5NmwtMjcuMTM2LTQzLjQyNEM4MzkuMDA4IDc3NS41ODQgOTA4LjggNjQ5LjcyOCA5MDguOCA1MTJjMC0xMzMuMjE2LTY2LjMzNi0yNTYuODMyLTE3Ny40MDgtMzMwLjY4OGwyOC4zNTItNDIuNjI0Qzg4NS4xMiAyMjIuMDQ4IDk2MCAzNjEuNiA5NjAgNTEyYzAgMTU1LjQ4OC03OC43ODQgMjk3LjU2OC0yMTAuNzg0IDM4MC4wOTZ6TTI3NC43ODQgODkyLjEyOEMxNDIuODE2IDgwOS41NjggNjQgNjY3LjQ4OCA2NCA1MTJjMC0xNTAuNCA3NC44OC0yODkuOTUyIDIwMC4yNTYtMzczLjMxMmwyOC4zNTIgNDIuNjI0QzE4MS41MzYgMjU1LjE2OCAxMTUuMiAzNzguNzg0IDExNS4yIDUxMmMwIDEzNy43MjggNjkuNzkyIDI2My41ODQgMTg2LjcyIDMzNi43MDRsLTI3LjEzNiA0My40MjR6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTI5Ij48L3BhdGg+CiAgICA8cGF0aAogICAgICBkPSJNNTEyIDg0OGMtMTg1LjI4IDAtMzM2LTE1MC43Mi0zMzYtMzM2UzMyNi43MiAxNzYgNTEyIDE3NnMzMzYgMTUwLjcyIDMzNiAzMzYtMTUwLjcyIDMzNi0zMzYgMzM2eiBtMC02MjAuOGMtMTU3LjAyNCAwLTI4NC44IDEyNy43NzYtMjg0LjggMjg0LjggMCAxNTcuMDU2IDEyNy43NzYgMjg0LjggMjg0LjggMjg0LjggMTU3LjA1NiAwIDI4NC44LTEyNy43NDQgMjg0LjgtMjg0LjggMC0xNTcuMDI0LTEyNy43NDQtMjg0LjgtMjg0LjgtMjg0Ljh6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTMwIj48L3BhdGg+CiAgICA8cGF0aAogICAgICBkPSJNMjY0LjUxMiA2MTMuNTM2bDY3LjIzMi0yMDIuOTQ0aDM2Ljg2NGw2Ny4yMzIgMjAyLjk0NGgtMzMuODg4bC0xNy4wODgtNTcuODI0SDMxNC40MzJsLTE3LjM0NCA1Ny44MjRIMjY0LjUxMnogbTY1LjUwNC0xMTAuMTQ0bC04LjE5MiAyNy4yOTZoNTUuMzkybC04LjA2NC0yNy4yOTZjLTMuNDI0LTExLjA0LTYuNjU2LTIyLjE3Ni05Ljc2LTMzLjQwOC0zLjEwNC0xMS4yNjQtNi4xNzYtMjIuNjI0LTkuMjE2LTM0LjA4aC0xLjM0NGMtMi45NDQgMTEuNTUyLTYuMDE2IDIyLjk0NC05LjE1MiAzNC4xNDQtMy4xMDQgMTEuMi02LjMzNiAyMi4zMzYtOS42NjQgMzMuMzQ0ek00NTEuNjE2IDYxMy41MzZ2LTIwMi45NDRoNjIuODE2YzEzLjc5MiAwIDI2LjExMiAxLjYgMzYuOTI4IDQuODMyIDEwLjgxNiAzLjIzMiAxOS4yNjQgOC41MTIgMjUuNDA4IDE1Ljg3MiA2LjE0NCA3LjM2IDkuMjE2IDE3LjEyIDkuMjE2IDI5LjMxMiAwIDkuNjk2LTIuNTYgMTguNjU2LTcuNjggMjYuOTEyLTUuMTIgOC4yNTYtMTIuMTkyIDEzLjg4OC0yMS4yNDggMTYuOTZ2MS4zNDRjMTEuNTUyIDIuNDk2IDIxLjEyIDcuNzQ0IDI4LjY0IDE1LjY4czExLjI5NiAxOC44MTYgMTEuMjk2IDMyLjYwOGMwIDEzLjM0NC0zLjM2IDI0LjQxNi0xMC4wOCAzMy4yMTYtNi43MiA4LjgtMTUuOTM2IDE1LjM2LTI3LjY0OCAxOS43MTJzLTI1LjAyNCA2LjUyOC00MCA2LjUyOGgtNjcuNjQ4eiBtMzEuODcyLTExOC4yMDhoMjcuMjk2YzE1LjQyNCAwIDI2LjU5Mi0yLjcyIDMzLjQ3Mi04LjEyOCA2LjkxMi01LjQwOCAxMC4zNjgtMTIuODk2IDEwLjM2OC0yMi40IDAtMTAuNTkyLTMuNTg0LTE4LjA4LTEwLjc1Mi0yMi41MjgtNy4xNjgtNC40NDgtMTcuOTItNi42NTYtMzIuMjg4LTYuNjU2aC0yOC4wOTZ2NTkuNzEyeiBtMCA5My4xODRoMzIuMjg4YzE1Ljc3NiAwIDI4LjAzMi0yLjkxMiAzNi43NjgtOC43MzYgOC43MzYtNS44MjQgMTMuMTItMTQuOTc2IDEzLjEyLTI3LjQyNCAwLTExLjM5Mi00LjI4OC0xOS43MTItMTIuODMyLTI1LjAyNC04LjU3Ni01LjI4LTIwLjg5Ni03LjkzNi0zNy4wNTYtNy45MzZoLTMyLjI4OHY2OS4xMnpNNjc3LjQwOCA2MTcuMTg0Yy0xMy44ODggMC0yNy4xMDQtMi42MjQtMzkuNjE2LTcuODcyLTEyLjUxMi01LjI0OC0yMy4zOTItMTIuNTc2LTMyLjYwOC0yMS45ODRsMTguNjg4LTIxLjkyYzcuMzYgNy4yNjQgMTUuNzQ0IDEzLjA1NiAyNS4yMTYgMTcuNDA4czE5LjA3MiA2LjUyOCAyOC44MzIgNi41MjhjMTIuMjg4IDAgMjEuNzI4LTIuNjU2IDI4LjM4NC03LjkzNiA2LjYyNC01LjI4IDkuOTUyLTEyLjE5MiA5Ljk1Mi0yMC43MDQgMC02LjE3Ni0xLjQwOC0xMS4xNjgtNC4yMjQtMTQuOTEyLTIuODE2LTMuNzc2LTYuNjg4LTYuOTQ0LTExLjYxNi05LjUzNnMtMTAuNDk2LTUuMjgtMTYuNjcyLTguMDY0bC0yOC4wOTYtMTIuMDk2YTEwMC4zODQgMTAwLjM4NCAwIDAgMS0xOS4yOTYtMTAuOTc2Yy02LjMzNi00LjUxMi0xMS41NTItMTAuMjQtMTUuNzQ0LTE3LjE1Mi00LjE2LTYuOTEyLTYuMjQtMTUuMjMyLTYuMjQtMjUuMDI0IDAtMTAuNjU2IDIuODgtMjAuMjI0IDguNjA4LTI4LjY0IDUuNzI4LTguNDE2IDEzLjYzMi0xNS4wNzIgMjMuNjgtMTkuOTY4IDEwLjA0OC00Ljg5NiAyMS40NzItNy4zMjggMzQuMzA0LTcuMzI4IDExLjg0IDAgMjMuMTA0IDIuMzA0IDMzLjgyNCA2LjkxMiAxMC43MiA0LjYwOCAxOS45MzYgMTAuODE2IDI3LjY0OCAxOC42MjRsLTE2LjggMjAuNDQ4Yy02LjM2OC01LjYzMi0xMy4xNTItMTAuMDgtMjAuMzg0LTEzLjMxMi03LjItMy4yMzItMTUuMjk2LTQuODMyLTI0LjI1Ni00LjgzMi0xMC4zMDQgMC0xOC41OTIgMi4zMDQtMjQuOCA2LjkxMi02LjI0IDQuNjA4LTkuMzQ0IDEwLjkxMi05LjM0NCAxOC44OCAwIDUuOTIgMS42IDEwLjc1MiA0Ljc2OCAxNC40NjQgMy4xNjggMy43MTIgNy4yOTYgNi44NDggMTIuMjg4IDkuMzQ0IDUuMDI0IDIuNDk2IDEwLjI3MiA0Ljg5NiAxNS43NDQgNy4xMzZsMjcuODQgMTEuODRjMTIgNS4xMiAyMS44ODggMTEuNzc2IDI5LjY2NCAyMC4wMzIgNy43NDQgOC4yNTYgMTEuNjE2IDE5LjgwOCAxMS42MTYgMzQuNjg4IDAgMTAuODQ4LTIuODggMjAuNzM2LTguNjA4IDI5LjY2NC01LjcyOCA4LjkyOC0xMy45MiAxNi4wNjQtMjQuNTQ0IDIxLjM3Ni0xMC42ODggNS4zMTItMjMuNDI0IDgtMzguMjA4IDh6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTMxIj48L3BhdGg+CiAgPC9zdmc+' },
    { key: '3', icon: 'data:image/svg+xml;charset=utf-8;base64,ICA8c3ZnCiAgICB0PSIxNzIyODI3NDY0MjYwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMjgiCiAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPgogICAgPHBhdGgKICAgICAgZD0iTTc0OS4yMTYgODkyLjA5NmwtMjcuMTM2LTQzLjQyNEM4MzkuMDA4IDc3NS41ODQgOTA4LjggNjQ5LjcyOCA5MDguOCA1MTJjMC0xMzMuMjE2LTY2LjMzNi0yNTYuODMyLTE3Ny40MDgtMzMwLjY4OGwyOC4zNTItNDIuNjI0Qzg4NS4xMiAyMjIuMDQ4IDk2MCAzNjEuNiA5NjAgNTEyYzAgMTU1LjQ4OC03OC43ODQgMjk3LjU2OC0yMTAuNzg0IDM4MC4wOTZ6TTI3NC43ODQgODkyLjEyOEMxNDIuODE2IDgwOS41NjggNjQgNjY3LjQ4OCA2NCA1MTJjMC0xNTAuNCA3NC44OC0yODkuOTUyIDIwMC4yNTYtMzczLjMxMmwyOC4zNTIgNDIuNjI0QzE4MS41MzYgMjU1LjE2OCAxMTUuMiAzNzguNzg0IDExNS4yIDUxMmMwIDEzNy43MjggNjkuNzkyIDI2My41ODQgMTg2LjcyIDMzNi43MDRsLTI3LjEzNiA0My40MjR6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTI5Ij48L3BhdGg+CiAgICA8cGF0aAogICAgICBkPSJNNTEyIDg0OGMtMTg1LjI4IDAtMzM2LTE1MC43Mi0zMzYtMzM2UzMyNi43MiAxNzYgNTEyIDE3NnMzMzYgMTUwLjcyIDMzNiAzMzYtMTUwLjcyIDMzNi0zMzYgMzM2eiBtMC02MjAuOGMtMTU3LjAyNCAwLTI4NC44IDEyNy43NzYtMjg0LjggMjg0LjggMCAxNTcuMDU2IDEyNy43NzYgMjg0LjggMjg0LjggMjg0LjggMTU3LjA1NiAwIDI4NC44LTEyNy43NDQgMjg0LjgtMjg0LjggMC0xNTcuMDI0LTEyNy43NDQtMjg0LjgtMjg0LjgtMjg0Ljh6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTMwIj48L3BhdGg+CiAgICA8cGF0aAogICAgICBkPSJNMjY0LjUxMiA2MTMuNTM2bDY3LjIzMi0yMDIuOTQ0aDM2Ljg2NGw2Ny4yMzIgMjAyLjk0NGgtMzMuODg4bC0xNy4wODgtNTcuODI0SDMxNC40MzJsLTE3LjM0NCA1Ny44MjRIMjY0LjUxMnogbTY1LjUwNC0xMTAuMTQ0bC04LjE5MiAyNy4yOTZoNTUuMzkybC04LjA2NC0yNy4yOTZjLTMuNDI0LTExLjA0LTYuNjU2LTIyLjE3Ni05Ljc2LTMzLjQwOC0zLjEwNC0xMS4yNjQtNi4xNzYtMjIuNjI0LTkuMjE2LTM0LjA4aC0xLjM0NGMtMi45NDQgMTEuNTUyLTYuMDE2IDIyLjk0NC05LjE1MiAzNC4xNDQtMy4xMDQgMTEuMi02LjMzNiAyMi4zMzYtOS42NjQgMzMuMzQ0ek00NTEuNjE2IDYxMy41MzZ2LTIwMi45NDRoNjIuODE2YzEzLjc5MiAwIDI2LjExMiAxLjYgMzYuOTI4IDQuODMyIDEwLjgxNiAzLjIzMiAxOS4yNjQgOC41MTIgMjUuNDA4IDE1Ljg3MiA2LjE0NCA3LjM2IDkuMjE2IDE3LjEyIDkuMjE2IDI5LjMxMiAwIDkuNjk2LTIuNTYgMTguNjU2LTcuNjggMjYuOTEyLTUuMTIgOC4yNTYtMTIuMTkyIDEzLjg4OC0yMS4yNDggMTYuOTZ2MS4zNDRjMTEuNTUyIDIuNDk2IDIxLjEyIDcuNzQ0IDI4LjY0IDE1LjY4czExLjI5NiAxOC44MTYgMTEuMjk2IDMyLjYwOGMwIDEzLjM0NC0zLjM2IDI0LjQxNi0xMC4wOCAzMy4yMTYtNi43MiA4LjgtMTUuOTM2IDE1LjM2LTI3LjY0OCAxOS43MTJzLTI1LjAyNCA2LjUyOC00MCA2LjUyOGgtNjcuNjQ4eiBtMzEuODcyLTExOC4yMDhoMjcuMjk2YzE1LjQyNCAwIDI2LjU5Mi0yLjcyIDMzLjQ3Mi04LjEyOCA2LjkxMi01LjQwOCAxMC4zNjgtMTIuODk2IDEwLjM2OC0yMi40IDAtMTAuNTkyLTMuNTg0LTE4LjA4LTEwLjc1Mi0yMi41MjgtNy4xNjgtNC40NDgtMTcuOTItNi42NTYtMzIuMjg4LTYuNjU2aC0yOC4wOTZ2NTkuNzEyeiBtMCA5My4xODRoMzIuMjg4YzE1Ljc3NiAwIDI4LjAzMi0yLjkxMiAzNi43NjgtOC43MzYgOC43MzYtNS44MjQgMTMuMTItMTQuOTc2IDEzLjEyLTI3LjQyNCAwLTExLjM5Mi00LjI4OC0xOS43MTItMTIuODMyLTI1LjAyNC04LjU3Ni01LjI4LTIwLjg5Ni03LjkzNi0zNy4wNTYtNy45MzZoLTMyLjI4OHY2OS4xMnpNNjc3LjQwOCA2MTcuMTg0Yy0xMy44ODggMC0yNy4xMDQtMi42MjQtMzkuNjE2LTcuODcyLTEyLjUxMi01LjI0OC0yMy4zOTItMTIuNTc2LTMyLjYwOC0yMS45ODRsMTguNjg4LTIxLjkyYzcuMzYgNy4yNjQgMTUuNzQ0IDEzLjA1NiAyNS4yMTYgMTcuNDA4czE5LjA3MiA2LjUyOCAyOC44MzIgNi41MjhjMTIuMjg4IDAgMjEuNzI4LTIuNjU2IDI4LjM4NC03LjkzNiA2LjYyNC01LjI4IDkuOTUyLTEyLjE5MiA5Ljk1Mi0yMC43MDQgMC02LjE3Ni0xLjQwOC0xMS4xNjgtNC4yMjQtMTQuOTEyLTIuODE2LTMuNzc2LTYuNjg4LTYuOTQ0LTExLjYxNi05LjUzNnMtMTAuNDk2LTUuMjgtMTYuNjcyLTguMDY0bC0yOC4wOTYtMTIuMDk2YTEwMC4zODQgMTAwLjM4NCAwIDAgMS0xOS4yOTYtMTAuOTc2Yy02LjMzNi00LjUxMi0xMS41NTItMTAuMjQtMTUuNzQ0LTE3LjE1Mi00LjE2LTYuOTEyLTYuMjQtMTUuMjMyLTYuMjQtMjUuMDI0IDAtMTAuNjU2IDIuODgtMjAuMjI0IDguNjA4LTI4LjY0IDUuNzI4LTguNDE2IDEzLjYzMi0xNS4wNzIgMjMuNjgtMTkuOTY4IDEwLjA0OC00Ljg5NiAyMS40NzItNy4zMjggMzQuMzA0LTcuMzI4IDExLjg0IDAgMjMuMTA0IDIuMzA0IDMzLjgyNCA2LjkxMiAxMC43MiA0LjYwOCAxOS45MzYgMTAuODE2IDI3LjY0OCAxOC42MjRsLTE2LjggMjAuNDQ4Yy02LjM2OC01LjYzMi0xMy4xNTItMTAuMDgtMjAuMzg0LTEzLjMxMi03LjItMy4yMzItMTUuMjk2LTQuODMyLTI0LjI1Ni00LjgzMi0xMC4zMDQgMC0xOC41OTIgMi4zMDQtMjQuOCA2LjkxMi02LjI0IDQuNjA4LTkuMzQ0IDEwLjkxMi05LjM0NCAxOC44OCAwIDUuOTIgMS42IDEwLjc1MiA0Ljc2OCAxNC40NjQgMy4xNjggMy43MTIgNy4yOTYgNi44NDggMTIuMjg4IDkuMzQ0IDUuMDI0IDIuNDk2IDEwLjI3MiA0Ljg5NiAxNS43NDQgNy4xMzZsMjcuODQgMTEuODRjMTIgNS4xMiAyMS44ODggMTEuNzc2IDI5LjY2NCAyMC4wMzIgNy43NDQgOC4yNTYgMTEuNjE2IDE5LjgwOCAxMS42MTYgMzQuNjg4IDAgMTAuODQ4LTIuODggMjAuNzM2LTguNjA4IDI5LjY2NC01LjcyOCA4LjkyOC0xMy45MiAxNi4wNjQtMjQuNTQ0IDIxLjM3Ni0xMC42ODggNS4zMTItMjMuNDI0IDgtMzguMjA4IDh6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTMxIj48L3BhdGg+CiAgPC9zdmc+' },
    { key: '4', icon: 'data:image/svg+xml;charset=utf-8;base64,ICA8c3ZnCiAgICB0PSIxNzIyODI3NDY0MjYwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMjgiCiAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPgogICAgPHBhdGgKICAgICAgZD0iTTc0OS4yMTYgODkyLjA5NmwtMjcuMTM2LTQzLjQyNEM4MzkuMDA4IDc3NS41ODQgOTA4LjggNjQ5LjcyOCA5MDguOCA1MTJjMC0xMzMuMjE2LTY2LjMzNi0yNTYuODMyLTE3Ny40MDgtMzMwLjY4OGwyOC4zNTItNDIuNjI0Qzg4NS4xMiAyMjIuMDQ4IDk2MCAzNjEuNiA5NjAgNTEyYzAgMTU1LjQ4OC03OC43ODQgMjk3LjU2OC0yMTAuNzg0IDM4MC4wOTZ6TTI3NC43ODQgODkyLjEyOEMxNDIuODE2IDgwOS41NjggNjQgNjY3LjQ4OCA2NCA1MTJjMC0xNTAuNCA3NC44OC0yODkuOTUyIDIwMC4yNTYtMzczLjMxMmwyOC4zNTIgNDIuNjI0QzE4MS41MzYgMjU1LjE2OCAxMTUuMiAzNzguNzg0IDExNS4yIDUxMmMwIDEzNy43MjggNjkuNzkyIDI2My41ODQgMTg2LjcyIDMzNi43MDRsLTI3LjEzNiA0My40MjR6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTI5Ij48L3BhdGg+CiAgICA8cGF0aAogICAgICBkPSJNNTEyIDg0OGMtMTg1LjI4IDAtMzM2LTE1MC43Mi0zMzYtMzM2UzMyNi43MiAxNzYgNTEyIDE3NnMzMzYgMTUwLjcyIDMzNiAzMzYtMTUwLjcyIDMzNi0zMzYgMzM2eiBtMC02MjAuOGMtMTU3LjAyNCAwLTI4NC44IDEyNy43NzYtMjg0LjggMjg0LjggMCAxNTcuMDU2IDEyNy43NzYgMjg0LjggMjg0LjggMjg0LjggMTU3LjA1NiAwIDI4NC44LTEyNy43NDQgMjg0LjgtMjg0LjggMC0xNTcuMDI0LTEyNy43NDQtMjg0LjgtMjg0LjgtMjg0Ljh6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTMwIj48L3BhdGg+CiAgICA8cGF0aAogICAgICBkPSJNMjY0LjUxMiA2MTMuNTM2bDY3LjIzMi0yMDIuOTQ0aDM2Ljg2NGw2Ny4yMzIgMjAyLjk0NGgtMzMuODg4bC0xNy4wODgtNTcuODI0SDMxNC40MzJsLTE3LjM0NCA1Ny44MjRIMjY0LjUxMnogbTY1LjUwNC0xMTAuMTQ0bC04LjE5MiAyNy4yOTZoNTUuMzkybC04LjA2NC0yNy4yOTZjLTMuNDI0LTExLjA0LTYuNjU2LTIyLjE3Ni05Ljc2LTMzLjQwOC0zLjEwNC0xMS4yNjQtNi4xNzYtMjIuNjI0LTkuMjE2LTM0LjA4aC0xLjM0NGMtMi45NDQgMTEuNTUyLTYuMDE2IDIyLjk0NC05LjE1MiAzNC4xNDQtMy4xMDQgMTEuMi02LjMzNiAyMi4zMzYtOS42NjQgMzMuMzQ0ek00NTEuNjE2IDYxMy41MzZ2LTIwMi45NDRoNjIuODE2YzEzLjc5MiAwIDI2LjExMiAxLjYgMzYuOTI4IDQuODMyIDEwLjgxNiAzLjIzMiAxOS4yNjQgOC41MTIgMjUuNDA4IDE1Ljg3MiA2LjE0NCA3LjM2IDkuMjE2IDE3LjEyIDkuMjE2IDI5LjMxMiAwIDkuNjk2LTIuNTYgMTguNjU2LTcuNjggMjYuOTEyLTUuMTIgOC4yNTYtMTIuMTkyIDEzLjg4OC0yMS4yNDggMTYuOTZ2MS4zNDRjMTEuNTUyIDIuNDk2IDIxLjEyIDcuNzQ0IDI4LjY0IDE1LjY4czExLjI5NiAxOC44MTYgMTEuMjk2IDMyLjYwOGMwIDEzLjM0NC0zLjM2IDI0LjQxNi0xMC4wOCAzMy4yMTYtNi43MiA4LjgtMTUuOTM2IDE1LjM2LTI3LjY0OCAxOS43MTJzLTI1LjAyNCA2LjUyOC00MCA2LjUyOGgtNjcuNjQ4eiBtMzEuODcyLTExOC4yMDhoMjcuMjk2YzE1LjQyNCAwIDI2LjU5Mi0yLjcyIDMzLjQ3Mi04LjEyOCA2LjkxMi01LjQwOCAxMC4zNjgtMTIuODk2IDEwLjM2OC0yMi40IDAtMTAuNTkyLTMuNTg0LTE4LjA4LTEwLjc1Mi0yMi41MjgtNy4xNjgtNC40NDgtMTcuOTItNi42NTYtMzIuMjg4LTYuNjU2aC0yOC4wOTZ2NTkuNzEyeiBtMCA5My4xODRoMzIuMjg4YzE1Ljc3NiAwIDI4LjAzMi0yLjkxMiAzNi43NjgtOC43MzYgOC43MzYtNS44MjQgMTMuMTItMTQuOTc2IDEzLjEyLTI3LjQyNCAwLTExLjM5Mi00LjI4OC0xOS43MTItMTIuODMyLTI1LjAyNC04LjU3Ni01LjI4LTIwLjg5Ni03LjkzNi0zNy4wNTYtNy45MzZoLTMyLjI4OHY2OS4xMnpNNjc3LjQwOCA2MTcuMTg0Yy0xMy44ODggMC0yNy4xMDQtMi42MjQtMzkuNjE2LTcuODcyLTEyLjUxMi01LjI0OC0yMy4zOTItMTIuNTc2LTMyLjYwOC0yMS45ODRsMTguNjg4LTIxLjkyYzcuMzYgNy4yNjQgMTUuNzQ0IDEzLjA1NiAyNS4yMTYgMTcuNDA4czE5LjA3MiA2LjUyOCAyOC44MzIgNi41MjhjMTIuMjg4IDAgMjEuNzI4LTIuNjU2IDI4LjM4NC03LjkzNiA2LjYyNC01LjI4IDkuOTUyLTEyLjE5MiA5Ljk1Mi0yMC43MDQgMC02LjE3Ni0xLjQwOC0xMS4xNjgtNC4yMjQtMTQuOTEyLTIuODE2LTMuNzc2LTYuNjg4LTYuOTQ0LTExLjYxNi05LjUzNnMtMTAuNDk2LTUuMjgtMTYuNjcyLTguMDY0bC0yOC4wOTYtMTIuMDk2YTEwMC4zODQgMTAwLjM4NCAwIDAgMS0xOS4yOTYtMTAuOTc2Yy02LjMzNi00LjUxMi0xMS41NTItMTAuMjQtMTUuNzQ0LTE3LjE1Mi00LjE2LTYuOTEyLTYuMjQtMTUuMjMyLTYuMjQtMjUuMDI0IDAtMTAuNjU2IDIuODgtMjAuMjI0IDguNjA4LTI4LjY0IDUuNzI4LTguNDE2IDEzLjYzMi0xNS4wNzIgMjMuNjgtMTkuOTY4IDEwLjA0OC00Ljg5NiAyMS40NzItNy4zMjggMzQuMzA0LTcuMzI4IDExLjg0IDAgMjMuMTA0IDIuMzA0IDMzLjgyNCA2LjkxMiAxMC43MiA0LjYwOCAxOS45MzYgMTAuODE2IDI3LjY0OCAxOC42MjRsLTE2LjggMjAuNDQ4Yy02LjM2OC01LjYzMi0xMy4xNTItMTAuMDgtMjAuMzg0LTEzLjMxMi03LjItMy4yMzItMTUuMjk2LTQuODMyLTI0LjI1Ni00LjgzMi0xMC4zMDQgMC0xOC41OTIgMi4zMDQtMjQuOCA2LjkxMi02LjI0IDQuNjA4LTkuMzQ0IDEwLjkxMi05LjM0NCAxOC44OCAwIDUuOTIgMS42IDEwLjc1MiA0Ljc2OCAxNC40NjQgMy4xNjggMy43MTIgNy4yOTYgNi44NDggMTIuMjg4IDkuMzQ0IDUuMDI0IDIuNDk2IDEwLjI3MiA0Ljg5NiAxNS43NDQgNy4xMzZsMjcuODQgMTEuODRjMTIgNS4xMiAyMS44ODggMTEuNzc2IDI5LjY2NCAyMC4wMzIgNy43NDQgOC4yNTYgMTEuNjE2IDE5LjgwOCAxMS42MTYgMzQuNjg4IDAgMTAuODQ4LTIuODggMjAuNzM2LTguNjA4IDI5LjY2NC01LjcyOCA4LjkyOC0xMy45MiAxNi4wNjQtMjQuNTQ0IDIxLjM3Ni0xMC42ODggNS4zMTItMjMuNDI0IDgtMzguMjA4IDh6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTMxIj48L3BhdGg+CiAgPC9zdmc+' },
    { key: '5', icon: 'data:image/svg+xml;charset=utf-8;base64,ICA8c3ZnCiAgICB0PSIxNzIyODI3NDY0MjYwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjExMjgiCiAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPgogICAgPHBhdGgKICAgICAgZD0iTTc0OS4yMTYgODkyLjA5NmwtMjcuMTM2LTQzLjQyNEM4MzkuMDA4IDc3NS41ODQgOTA4LjggNjQ5LjcyOCA5MDguOCA1MTJjMC0xMzMuMjE2LTY2LjMzNi0yNTYuODMyLTE3Ny40MDgtMzMwLjY4OGwyOC4zNTItNDIuNjI0Qzg4NS4xMiAyMjIuMDQ4IDk2MCAzNjEuNiA5NjAgNTEyYzAgMTU1LjQ4OC03OC43ODQgMjk3LjU2OC0yMTAuNzg0IDM4MC4wOTZ6TTI3NC43ODQgODkyLjEyOEMxNDIuODE2IDgwOS41NjggNjQgNjY3LjQ4OCA2NCA1MTJjMC0xNTAuNCA3NC44OC0yODkuOTUyIDIwMC4yNTYtMzczLjMxMmwyOC4zNTIgNDIuNjI0QzE4MS41MzYgMjU1LjE2OCAxMTUuMiAzNzguNzg0IDExNS4yIDUxMmMwIDEzNy43MjggNjkuNzkyIDI2My41ODQgMTg2LjcyIDMzNi43MDRsLTI3LjEzNiA0My40MjR6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTI5Ij48L3BhdGg+CiAgICA8cGF0aAogICAgICBkPSJNNTEyIDg0OGMtMTg1LjI4IDAtMzM2LTE1MC43Mi0zMzYtMzM2UzMyNi43MiAxNzYgNTEyIDE3NnMzMzYgMTUwLjcyIDMzNiAzMzYtMTUwLjcyIDMzNi0zMzYgMzM2eiBtMC02MjAuOGMtMTU3LjAyNCAwLTI4NC44IDEyNy43NzYtMjg0LjggMjg0LjggMCAxNTcuMDU2IDEyNy43NzYgMjg0LjggMjg0LjggMjg0LjggMTU3LjA1NiAwIDI4NC44LTEyNy43NDQgMjg0LjgtMjg0LjggMC0xNTcuMDI0LTEyNy43NDQtMjg0LjgtMjg0LjgtMjg0Ljh6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTMwIj48L3BhdGg+CiAgICA8cGF0aAogICAgICBkPSJNMjY0LjUxMiA2MTMuNTM2bDY3LjIzMi0yMDIuOTQ0aDM2Ljg2NGw2Ny4yMzIgMjAyLjk0NGgtMzMuODg4bC0xNy4wODgtNTcuODI0SDMxNC40MzJsLTE3LjM0NCA1Ny44MjRIMjY0LjUxMnogbTY1LjUwNC0xMTAuMTQ0bC04LjE5MiAyNy4yOTZoNTUuMzkybC04LjA2NC0yNy4yOTZjLTMuNDI0LTExLjA0LTYuNjU2LTIyLjE3Ni05Ljc2LTMzLjQwOC0zLjEwNC0xMS4yNjQtNi4xNzYtMjIuNjI0LTkuMjE2LTM0LjA4aC0xLjM0NGMtMi45NDQgMTEuNTUyLTYuMDE2IDIyLjk0NC05LjE1MiAzNC4xNDQtMy4xMDQgMTEuMi02LjMzNiAyMi4zMzYtOS42NjQgMzMuMzQ0ek00NTEuNjE2IDYxMy41MzZ2LTIwMi45NDRoNjIuODE2YzEzLjc5MiAwIDI2LjExMiAxLjYgMzYuOTI4IDQuODMyIDEwLjgxNiAzLjIzMiAxOS4yNjQgOC41MTIgMjUuNDA4IDE1Ljg3MiA2LjE0NCA3LjM2IDkuMjE2IDE3LjEyIDkuMjE2IDI5LjMxMiAwIDkuNjk2LTIuNTYgMTguNjU2LTcuNjggMjYuOTEyLTUuMTIgOC4yNTYtMTIuMTkyIDEzLjg4OC0yMS4yNDggMTYuOTZ2MS4zNDRjMTEuNTUyIDIuNDk2IDIxLjEyIDcuNzQ0IDI4LjY0IDE1LjY4czExLjI5NiAxOC44MTYgMTEuMjk2IDMyLjYwOGMwIDEzLjM0NC0zLjM2IDI0LjQxNi0xMC4wOCAzMy4yMTYtNi43MiA4LjgtMTUuOTM2IDE1LjM2LTI3LjY0OCAxOS43MTJzLTI1LjAyNCA2LjUyOC00MCA2LjUyOGgtNjcuNjQ4eiBtMzEuODcyLTExOC4yMDhoMjcuMjk2YzE1LjQyNCAwIDI2LjU5Mi0yLjcyIDMzLjQ3Mi04LjEyOCA2LjkxMi01LjQwOCAxMC4zNjgtMTIuODk2IDEwLjM2OC0yMi40IDAtMTAuNTkyLTMuNTg0LTE4LjA4LTEwLjc1Mi0yMi41MjgtNy4xNjgtNC40NDgtMTcuOTItNi42NTYtMzIuMjg4LTYuNjU2aC0yOC4wOTZ2NTkuNzEyeiBtMCA5My4xODRoMzIuMjg4YzE1Ljc3NiAwIDI4LjAzMi0yLjkxMiAzNi43NjgtOC43MzYgOC43MzYtNS44MjQgMTMuMTItMTQuOTc2IDEzLjEyLTI3LjQyNCAwLTExLjM5Mi00LjI4OC0xOS43MTItMTIuODMyLTI1LjAyNC04LjU3Ni01LjI4LTIwLjg5Ni03LjkzNi0zNy4wNTYtNy45MzZoLTMyLjI4OHY2OS4xMnpNNjc3LjQwOCA2MTcuMTg0Yy0xMy44ODggMC0yNy4xMDQtMi42MjQtMzkuNjE2LTcuODcyLTEyLjUxMi01LjI0OC0yMy4zOTItMTIuNTc2LTMyLjYwOC0yMS45ODRsMTguNjg4LTIxLjkyYzcuMzYgNy4yNjQgMTUuNzQ0IDEzLjA1NiAyNS4yMTYgMTcuNDA4czE5LjA3MiA2LjUyOCAyOC44MzIgNi41MjhjMTIuMjg4IDAgMjEuNzI4LTIuNjU2IDI4LjM4NC03LjkzNiA2LjYyNC01LjI4IDkuOTUyLTEyLjE5MiA5Ljk1Mi0yMC43MDQgMC02LjE3Ni0xLjQwOC0xMS4xNjgtNC4yMjQtMTQuOTEyLTIuODE2LTMuNzc2LTYuNjg4LTYuOTQ0LTExLjYxNi05LjUzNnMtMTAuNDk2LTUuMjgtMTYuNjcyLTguMDY0bC0yOC4wOTYtMTIuMDk2YTEwMC4zODQgMTAwLjM4NCAwIDAgMS0xOS4yOTYtMTAuOTc2Yy02LjMzNi00LjUxMi0xMS41NTItMTAuMjQtMTUuNzQ0LTE3LjE1Mi00LjE2LTYuOTEyLTYuMjQtMTUuMjMyLTYuMjQtMjUuMDI0IDAtMTAuNjU2IDIuODgtMjAuMjI0IDguNjA4LTI4LjY0IDUuNzI4LTguNDE2IDEzLjYzMi0xNS4wNzIgMjMuNjgtMTkuOTY4IDEwLjA0OC00Ljg5NiAyMS40NzItNy4zMjggMzQuMzA0LTcuMzI4IDExLjg0IDAgMjMuMTA0IDIuMzA0IDMzLjgyNCA2LjkxMiAxMC43MiA0LjYwOCAxOS45MzYgMTAuODE2IDI3LjY0OCAxOC42MjRsLTE2LjggMjAuNDQ4Yy02LjM2OC01LjYzMi0xMy4xNTItMTAuMDgtMjAuMzg0LTEzLjMxMi03LjItMy4yMzItMTUuMjk2LTQuODMyLTI0LjI1Ni00LjgzMi0xMC4zMDQgMC0xOC41OTIgMi4zMDQtMjQuOCA2LjkxMi02LjI0IDQuNjA4LTkuMzQ0IDEwLjkxMi05LjM0NCAxOC44OCAwIDUuOTIgMS42IDEwLjc1MiA0Ljc2OCAxNC40NjQgMy4xNjggMy43MTIgNy4yOTYgNi44NDggMTIuMjg4IDkuMzQ0IDUuMDI0IDIuNDk2IDEwLjI3MiA0Ljg5NiAxNS43NDQgNy4xMzZsMjcuODQgMTEuODRjMTIgNS4xMiAyMS44ODggMTEuNzc2IDI5LjY2NCAyMC4wMzIgNy43NDQgOC4yNTYgMTEuNjE2IDE5LjgwOCAxMS42MTYgMzQuNjg4IDAgMTAuODQ4LTIuODggMjAuNzM2LTguNjA4IDI5LjY2NC01LjcyOCA4LjkyOC0xMy45MiAxNi4wNjQtMjQuNTQ0IDIxLjM3Ni0xMC42ODggNS4zMTItMjMuNDI0IDgtMzguMjA4IDh6IgogICAgICBmaWxsPSIjRjRBRTAwIiBwLWlkPSIxMTMxIj48L3BhdGg+CiAgPC9zdmc+' },
  ]

  const data = [
    { key: '1', value: 0, },
    { key: '2', value: 2, },
    { key: '3', value: 1, },
    { key: '4', value: 1, },
    { key: '5', value: 2, }
  ]





  const initChart = () => {
    const size = 30;
    const padding = 8;

    const gap = 5;
    const circleSize = size + padding;

    const chart = init(domRef.current, 'purple');
    chart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: function (params) {
          return params.data.status;
        }
      },

      graphic: graphics.map(({ key, icon }, index) => {

        const { value } = data.find(item => item.key === key);


        return ({
          type: 'group',
          children: [
            {
              type: 'circle',
              shape: {
                cx: circleSize / 2 + index * (circleSize + gap),
                cy: circleSize / 2,
                r: circleSize / 2
              },
              style: {
                fill: rule[value],
                stroke: '#000',
                lineWidth: 1
              },

              // 使用鼠标悬停事件来显示提示信息
              onclick: function () {
                // 点击事件处理，可以添加相关功能
                // console.log(indicator.status);
              }
            },
            {
              type: 'image',
              id: `icon-${index}`, // 为每个图标设置唯一的 ID
              style: {
                image: icon, // 图标的 URL
                x: circleSize / 2 + index * (circleSize + gap) - size/2, // 图标位置，中心对齐
                y: circleSize / 2 - size/2,
                width: size, // 图标宽度
                height: size, // 图标高度
                fill: '#ff0000'
              },
              z: 101
            }
          ]
        })
      })
    });
  }


  useEffect(() => {
    initChart();
  }, [])
  return (
    <div ref={domRef} className='size-full'></div>
  );
}
